<!--
 * @Author: taoke
 * @Date: 2022-04-29 13:59:18
 * @LastEditors: taoke
 * @LastEditTime: 2022-05-25 08:50:30
 * @Description: 
 * @FilePath: \yunying-sys-cli4\src\components\partner\invitedRecord\detailDialog.vue
-->
<template>
  <el-dialog
    title="详情"
    class="dialog"
    :visible="visible"
    @close="handleClose"
  >
    <div class="total-label">
      <label>邀请人: {{ getUserName }}</label>
      <label>收益金额: {{ headTotal.amount }}元</label>
      <label>未发放: {{ headTotal.notGrantAmount }}元</label>
    </div>
    <el-table
      ref="table"
      style="width: 100%;"
      row-key="id"
      v-loading="loading"
      border
      lazy
      :data="tableData"
      :load="load"
      :span-method="arraySpanMethod"
      :tree-props="{ hasChildren: 'hasChildren' }"
    >
      <el-table-column
        prop="userBInTime"
        label="邀请时间"
        width="180"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="userBe.userName"
        label="被邀请人"
        width="140"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="当前课程状态"
        prop="courseStatus"
        min-width="180"
        align="center"
        :formatter="courseStatusFormatter"
      >
      </el-table-column>
      <el-table-column
        prop="orderStatus"
        label="当前订单状态"
        width="120"
        align="center"
        :formatter="orderStatusFormatter"
      >
      </el-table-column>
      <el-table-column
        prop="orderTime"
        label="订单时间"
        width="140"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="trialCourseTime"
        label="试学时间"
        width="140"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="bonus" label="金额" width="80" align="center">
      </el-table-column>
      <el-table-column
        prop="bonusStatus"
        label="发放状态"
        width="120"
        align="center"
        :formatter="bonusStatusFormatter"
      >
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
  </el-dialog>
</template>

<script>
import { formatterValueByDict, formatterValueByOptions } from '@utils/table'
import {
  courseStatusOptions,
  orderStatusOptions
} from '@/components/partner/types/selectOptions'
import { sysNormalDisable } from '@utils/dictionariesFunc'
import { getDetailByUserId } from '@/api/partner/invitedRecord'
import { getAmount } from '@/api/partner/award'
import { tablePaginationMixin } from '@/mixins/tablePaginationMixin'
export default {
  name: 'invitedRecord-detailDialog',
  mixins: [tablePaginationMixin],
  data() {
    return {
      bonusStatusOptions: [],
      viewRow: {}, // 查看行数据
      headTotal: {
        amount: 0, // 合计发放金额
        notGrantAmount: 0 // 未到账金额
      },
      visible: false,
      loading: false,
      tableData: []
    }
  },
  computed: {
    getUserName() {
      return this.viewRow.user
        ? this.viewRow.user.userName
          ? this.viewRow.user.userName
          : ''
        : ''
    }
  },
  methods: {
    async getDict() {
      // 获取发放状态
      this.bonusStatusOptions = await sysNormalDisable(
        'partner_award_grant_status'
      )
    },
    initTotal() {
      const params = {
        dpAccount: this.viewRow.user.dpAccount
      }
      getAmount(params, (response) => {
        this.headTotal = response
      })
    },
    searchList() {
      this.loading = true
      const params = Object.assign(
        { userId: this.viewRow.user.userId },
        this.searchParams
      )
      getDetailByUserId(
        params,
        (response) => {
          this.tableData = response.rows
          this.tableData.forEach((data, index) => {
            // 确保tree行唯一，并且id不能为0, 为0时第一个行树懒加载后关闭不了
            // 解决后台返回数据重复问题
            data.id = data.userBe.userId ? data.userBe.userId + index : index
            data.hasChildren = true
          })
          this.total = response.total
          this.loading = false
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (row.type === 'empty') {
        return [1, this.$refs.table.columns.length]
      }
    },
    load(tree, treeNode, resolve) {
      if (tree.userBe && tree.userBe.userId) {
        const params = Object.assign(
          { userId: tree.userBe.userId },
          {
            pageNum: 1,
            pageSize: 9999
          }
        )
        getDetailByUserId(
          params,
          (response) => {
            const tableData = response.rows
            tableData.forEach((data, index) => {
              // 确保tree行唯一
              data.id = tree.userBe.userId
            })
            if (tableData.length) {
              resolve(tableData)
            } else {
              // 必须有id，根据type判断是否是空数据
              resolve([{ id: 2, userBInTime: '暂无数据', type: 'empty' }])
            }
          },
          (response) => {
            this.$message({
              message: response.message,
              type: 'warning'
            })
          }
        )
      } else {
        // 必须有id，根据type判断是否是空数据
        resolve([{ id: 3, userBInTime: '暂无数据', type: 'empty' }])
      }
    },
    async show({ row }) {
      this.searchParams.pageNum = 1
      this.viewRow = row
      await this.getDict()
      this.searchList()
      this.initTotal()
      this.visible = true
    },
    courseStatusFormatter(_row, _column, cellValue) {
      return formatterValueByOptions({
        cellValue,
        options: courseStatusOptions
      })
    },
    orderStatusFormatter(_row, _column, cellValue) {
      return formatterValueByOptions({
        cellValue,
        options: orderStatusOptions
      })
    },
    bonusStatusFormatter(_row, _column, cellValue) {
      return formatterValueByDict({
        cellValue,
        options: this.bonusStatusOptions
      })
    },
    handleClose() {
      this.visible = false
    }
  }
}
</script>
<style lang="less" scoped>
.dialog {
  :deep(.el-dialog) {
    width: 931px !important;
  }
  :deep(.el-dialog__body) {
    padding: 15px 30px 25px 20px !important;
  }
}
.total-label {
  display: flex;
  justify-content: center;
  margin-bottom: 5px;
  label {
    font-size: 18px;
    font-weight: 600;
    margin-right: 10px;
  }
}
</style>
